<template >
  <div>
    <template>
      <div>
        <div
          id="main"
          style="width: 25%; height: 200px; background: #fff; float: left"
        ></div>
      </div>
      <div style="margin-left: 30%">
        <div
          id="main1"
          style="width: 40%; height: 200px; background: #fff; float: left"
        ></div>
      </div>
      <div style="margin-left: 70%">
        <div
          id="main2"
          style="width: 80%; height: 200px; background: #fff"
        ></div>
      </div>
    </template>
    <el-row>
      <el-col
        :span="4"
        v-for="(item, index) in list"
        :key="item.id"
        :offset="index > 3 ? 3 : 3"
      >
        <el-card :body-style="{ padding: '0px' }">
          <div style="float: left">
            <img
              :src="'https://localhost:7145/Img/' + item.img"
              class="image"
              style="width: 80px; height: 80px"
            />
          </div>
          <div style="">
            <span>设备名称：{{ item.name }}</span>
            <br />
            <br />
            <span>充电电压：{{ item.voltage }}V</span>
            <br />
            <br />
            <span>充电功率：{{ item.power }}V</span>
            <br />
            <br />
            <span>运行时长：{{ item.hour }}小时{{ item.minute }}分钟</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
  </div>
</template>
<script>
import { getMonitoring } from "@/api/area/Schedule";

import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      getMonitoring().then((res) => {
        this.list = res.data.data;
      });
    },
  },

  mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: "充电桩统计图",
        left: "",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "0%",
        left: "63%",
      },
      series: [
        {
          name: "充电桩统计图",
          type: "pie",
          radius: "50%",
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 7, name: "故障：7台" },
            { value: 6, name: "占用：6台" },
            { value: 23, name: "空闲：23台" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);

    var chartDom1 = document.getElementById("main1");
    var myChart1 = echarts.init(chartDom1);
    var option1;
    option1 = {
      title: {
        text: "充电桩故障排行榜",
        left: "",
      },
      dataset: {
        source: [
          ["score", "amount", "product"],
          [89.3, 100, "电桩01"],
          [57.1, 134, "电桩02"],
          [74.4, 153, "电桩03"],
          [50.1, 185, "电桩04"],
          [89.7, 193, "电桩05"],
        ],
      },
      xAxis: { name: "amount" },
      yAxis: { type: "category" },
      series: [
        {
          type: "bar",
          encode: {
            x: "amount",
            y: "product",
          },
        },
      ],
    };
    option1 && myChart1.setOption(option1);

    var chartDom2 = document.getElementById("main2");
    var myChart2 = echarts.init(chartDom2);
    var option2

    option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "充电量统计",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220, 52, 200, 334, 390, 330],
        },
      ],
    };

    option2 && myChart2.setOption(option2);
  },
};
</script>


<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>